<!-- UserIndex -->
<template>
  <div id="UserIndex">
    <SearchForm @AddDataButton="AddDataButton" @SearchButton="SearchButton" />
    <div class="table_box">
      <el-table
        :data="tableData"
        border
        height="72vh"
        style="width: 100%"
      >
        <el-table-column label="#" type="index" width="50" align="center" />
        <el-table-column label="姓名" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.name ? scope.row.name : '暂无数据' }}
          </template>
        </el-table-column>

        <el-table-column label="年龄" width="50" align="center">
          <template slot-scope="scope">
            {{ scope.row.age ? scope.row.age : '暂无数据' }}
          </template>
        </el-table-column>

        <el-table-column label="性别" width="50" align="center">
          <template slot-scope="scope">
            {{ scope.row.gender === 1 ? '男': scope.row.gender === 0 ? '女' : '暂无数据' }}
          </template>
        </el-table-column>

        <el-table-column label="用户单价(元)" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.age ? scope.row.age : '暂无数据' }}
          </template>
        </el-table-column>

        <el-table-column label="出生日期" width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.birthDate ? scope.row.birthDate : '暂无数据' }}
          </template>
        </el-table-column>

        <el-table-column label="住址" align="center">
          <template slot-scope="scope">
            {{ scope.row.address ? scope.row.address : '暂无数据' }}
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="primary" icon="el-icon-edit" @click="EditClick(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" icon="el-icon-delete" @click="DeleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination_box margin_top">
      <ComponentsPagination :total="total" :current-page="page" @SizeChange="SizeChange" @CurrentChange="CurrentChange" />
    </div>

    <CustomModal :dialog-title="DialogTitle" :dialog-visible="DialogVisible" @DialogClose="DialogClose" @DialogOk="DialogOk">
      <el-form ref="AddOrEidtFormRef" :model="AddOrEidtForm" :rules="AddOrEidtFormRules" label-width="100px" size="small">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="AddOrEidtForm.name" clearable placeholder="请输入姓名" />
        </el-form-item>

        <el-form-item label="年龄" prop="age">
          <el-input-number v-model="AddOrEidtForm.age" :min="1" size="small" label="请输入年龄" class="from_input_number" />
        </el-form-item>

        <el-form-item label="性别" prop="gender">
          <el-select v-model="AddOrEidtForm.gender" placeholder="请选择性别" class="from_input_number" clearable>
            <el-option
              v-for="item in GenderList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="出生日期" prop="birthDate">
          <el-date-picker v-model="AddOrEidtForm.birthDate" type="date" format="yyyy年MM月dd日" value-format="yyyy-MM-dd" placeholder="请选择出生日期" clearable class="from_input_number" />
        </el-form-item>

        <el-form-item label="住址" prop="address">
          <el-input v-model="AddOrEidtForm.address" clearable placeholder="请输入住址" class="from_input_number" />
        </el-form-item>
      </el-form>
    </CustomModal>
  </div>
</template>

<script>
import SearchForm from './components/SearchForm'
import ComponentsPagination from '@/components/ComponentsPagination'
import CustomModal from '@/components/CustomModal'
import {
  Get_User_Table_Data_Api, // 获取用户表格数据
  POST_Add_User_Table_Data_Api, // 用户表格数据新增
  POST_Edit_User_Table_Data_Api, // 用户表格数据编辑
  POST_Delete_User_Table_Data_Api // 删除用户表格数据
} from '@/Api/UserApi'
import { mapState } from 'vuex'
import { PublicConfiguration_Limit } from '@utils/PublicConfiguration'
export default {
  name: 'UserIndex',
  components: {
    SearchForm,
    ComponentsPagination,
    CustomModal
  },
  data() {
    return {
      keyword: '', // 关键字搜索
      tableData: [], // 表格数据
      page: 1, // 当前页
      total: 0, // 数据总数
      limit: PublicConfiguration_Limit, // 每页条数
      DialogTitle: '', // Dialog标题
      DialogVisible: false, // Dialog状态
      AddOrEidtForm: {
        id: null, // id
        name: '', // 姓名
        age: '', // 年龄
        gender: '', // 性别
        birthDate: '', // 出生日期
        address: '' // 住址
      },
      AddOrEidtFormRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: ['change', 'blur'] }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: ['change', 'blur'] },
          { min: 0, message: '年龄不能为0', trigger: ['change', 'blur'] }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: ['change', 'blur'] }
        ],
        birthDate: [
          { required: true, message: '请选择出生日期', trigger: ['change', 'blur'] }
        ],
        address: [
          { required: true, message: '请输入住址', trigger: ['change', 'blur'] }
        ]
      },
      GenderList: [
        { value: 1, label: '男' },
        { value: 0, label: '女' }
      ]
    }
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {
    ...mapState('Common', [
      'MessageDuration',
      'CommonMessageCenter'
    ])
  },

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {
    this.Get_User_Table_Data_Api_Fun(this.keyword, this.page, this.limit)
  },

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    /**
     * @date: 2024-10-30 21:30:29
     * @description: 新增
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    AddDataButton() {
      console.log('新增')
      this.DialogTitle = '新增用户'
      this.DialogVisible = true
    },
    /**
     * @date: 2024-10-30 21:44:26
     * @description: 搜索
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    SearchButton(SearchButton) {
      console.log('搜索', SearchButton)
      this.keyword = SearchButton.keyword
      this.Get_User_Table_Data_Api_Fun(SearchButton.keyword, this.page, this.limit)
    },
    /**
     * @date: 2024-10-30 21:44:26
     * @description: 重置
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    ResetForm() {
      this.Get_User_Table_Data_Api_Fun('', this.page, this.limit)
    },
    /**
     * @date: 2024-10-30 21:47:02
     * @description: 获取表格列表
     * @param {Object | TopFormSearch} 关键字
     * @param {Number | page} 当前页
     * @param {Number | limit} 每页多少数据 默认20
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    Get_User_Table_Data_Api_Fun(TopFormSearch, page, limit) {
      Get_User_Table_Data_Api({
        name: TopFormSearch, // 搜索
        page: page, // 当前页码
        limit: limit // 每页条数
      }).then(res => {
        console.log('用户列表', res)
        if (res.code === 200) {
          this.tableData = res.data.tableData
          this.total = res.data.total
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
            duration: this.MessageDuration,
            center: this.CommonMessageCenter
          })
        }
      })
    },
    /**
     * @date: 2024-10-30 22:50:32
     * @description: 删除
     * @param {Object | row} 当前行数据
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    DeleteClick(row) {
      console.log('删除')
      this.$confirm('此操作将删除这条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        console.log('确定删除', row.id)
        this.POST_Delete_User_Table_Data_Api_Fun(row.id)
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消删除',
          duration: this.MessageDuration,
          center: this.CommonMessageCenter
        })
      })
    },
    /**
     * @date: 2024-10-30 23:03:57
     * @description: 删除表格接口
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    POST_Delete_User_Table_Data_Api_Fun(id) {
      POST_Delete_User_Table_Data_Api({
        id: id
      }).then(res => {
        console.log('删除用户', res)
        if (res.code === 200) {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: this.MessageDuration,
            center: this.CommonMessageCenter,
            onClose: this.Get_User_Table_Data_Api_Fun(this.keyword, this.page, this.limit)
          })
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
            duration: this.MessageDuration
          })
        }
      })
    },
    /**
     * @date: 2024-10-30 23:32:17
     * @description: 分页数量改变
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    SizeChange(SizeChange) {
      this.limit = SizeChange
      this.Get_User_Table_Data_Api_Fun(this.keyword, this.page, SizeChange)
    },
    /**
     * @date: 2024-10-30 23:37:18
     * @description: 第几页
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    CurrentChange(CurrentChange) {
      this.page = CurrentChange
      this.Get_User_Table_Data_Api_Fun(this.keyword, CurrentChange, this.limit)
    },
    /**
     * @date: 2024-10-30 22:51:46
     * @description: 编辑
     * @param {Object | row} 当前行数据
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    EditClick(row) {
      console.log('编辑', row)
      this.DialogTitle = '编辑用户'
      this.DialogVisible = true
      this.AddOrEidtForm = row
    },
    /**
     * @date: 2024-10-30 23:53:18
     * @description: dialog取消关闭
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    DialogClose() {
      console.log('dialog取消关闭')
      this.DialogVisible = false
    },
    /**
     * @date: 2024-10-30 23:53:27
     * @description: dialog确定
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    DialogOk() {
      console.log('dialog确定', this.AddOrEidtForm)
      if (this.AddOrEidtForm.id) { // 编辑
        this.POST_Edit_User_Table_Data_Api_Fun(this.AddOrEidtForm)
      } else { // 新增
        this.POST_Add_User_Table_Data_Api_Fun(this.AddOrEidtForm)
      }
    },
    /**
     * @date: 2024-10-30 23:53:27
     * @description: 用户表格数据编辑
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    POST_Edit_User_Table_Data_Api_Fun(FormData) {
      POST_Edit_User_Table_Data_Api({
        id: FormData.id, // id
        name: FormData.name,
        age: FormData.age,
        gender: FormData.gender,
        birthDate: FormData.birthDate,
        address: FormData.address
      }).then(res => {
        if (res.code === 200) {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: this.MessageDuration,
            center: this.CommonMessageCenter,
            onClose: this.AddOrEditDialogClose()
          })
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
            duration: this.MessageDuration
          })
        }
      })
    },
    /**
     * @date: 2024-10-30 23:53:27
     * @description: 用户表格数据新增
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    POST_Add_User_Table_Data_Api_Fun(FormData) {
      POST_Add_User_Table_Data_Api({
        name: FormData.name,
        age: FormData.age,
        gender: FormData.gender,
        birthDate: FormData.birthDate,
        address: FormData.address
      }).then(res => {
        if (res.code === 200) {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: this.MessageDuration,
            center: this.CommonMessageCenter,
            onClose: this.AddOrEditDialogClose()
          })
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
            duration: this.MessageDuration
          })
        }
      })
    },
    /**
     * @date: 2024-10-30 23:53:27
     * @description: 新增编辑成功弹窗回调
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    AddOrEditDialogClose() {
      this.DialogVisible = false
      this.Get_User_Table_Data_Api_Fun(this.keyword, this.page, this.limit)
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
